<template>
  <div class="example example1">
    <video
      id="my-player"
      class="video-js"
      controls
      preload="auto"
      poster="//vjs.zencdn.net/v/oceans.png"
      data-setup='{}'
      muted 
    >
      <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"/>
    </video>
  </div>
</template>
<script>
// 引入video.js相关的js和css
import videojs from 'video.js'
import "video.js/dist/video-js.min.css"
export default {
  name: 'App',
  mounted(){
    // 添加初始化宽和高，否则加载播放器的时候会闪一下
    let options = {width:960,height:400}
    videojs('my-player', options, function onPlayerReady() {
      videojs.log('播放器准备好了!');
      // 最新的浏览器一般禁止video自动播放，直接调用play()会报错。只有用户在页面上操作后或者在video标签上添加muted（静音）属性，才能调用play函数。本案例是在video标签上添加了muted属性。
      this.play();
      this.on('ended', function() {
        videojs.log('播放结束!');
      });
    });
  },
  onBeforeUnmount(){
    console.log('onBeforeUnmount')
    videojs('my-player').disposed()
  }
}
</script>


